<template>
  <div>
    <div class="title"> {{"阶段配置 - ["+phaseData.name + "]"}}</div>
    <el-form :model="formData" label-width="70px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
      <el-row :gutter="24">
        <el-col :xs="23" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="阶段名称">
            <el-input v-model="phaseData.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="阶段类型">
            <el-input v-model="phaseData.phaseType" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="阶段编码">
            <el-input v-model="phaseData.sn" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="物料名称" prop="itemId" class="w-100">
            <el-select v-model="formData.itemId" remote filterable :remote-method="remoteMethodMaterial" placeholder=""
              v-el-select-loadmore="loadMoreMaterialFun" clearable @clear="clearMaterial" @change="changeItemId">
              <el-option v-for="(item,index) in materialList" :key="index" :label="item.fid" :value="item.fid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="重量" prop="qty">
            <el-input type="number" v-enterNumber2 v-model="formData.qty" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item :label="$t('basic.company')">
            <el-input v-model="formData.uom" disabled placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="上限" prop="hi">
            <el-input type="number" v-enterNumber2 v-model="formData.hi" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="下限" prop="lo">
            <el-input type="number" v-enterNumber2 v-model="formData.lo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="备注">
            <el-input type="textarea" rows="3" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footerBtn">
      <el-button type="primary" size="small" :loading="loading"
        @click="handleConfirm('ruleForm')">{{ $t("common.preservation") }}</el-button>
      <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
    </div>
  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { formula } from "@/api/formula"
export default {
  props: {
    screenWidth: Number,
    isShow: Boolean,
    phaseData: Object,
    parentFid: String
  },
  data () {
    let HiFn = (rule, value, callback) => {
      if (value) {
        if (parseFloat(this.formData.qty) > parseFloat(value)) {
          callback(new Error('物料上限不能小于物料数量'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    let LoFn = (rule, value, callback) => {
      if (value) {
        if (parseFloat(value) > parseFloat(this.formData.qty)) {
          callback(new Error('物料下限不能大于物料数量'));
        } else if (this.formData.hi) {
          if (parseFloat(value) > parseFloat(this.formData.hi)) {
            callback(new Error('物料下限不能大于物料上限'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    return {
      formData: {
        stepDesc: "",
        isActive: false,
        isAuto: false,
        isAuto1: false,
        itemId: "",
        qty: "",
        uom: "",
        confirm: "",
        flastModifyComment: "",
        guideInfo: "",
        phaseDesc: "自动加料",
        hi: "",
        lo: "",
        signitature: false,
        isSignitature: false,
        startDelay: ""
      },
      stepId: "",
      rules: {
        itemId: [{ required: true, message: '请选择物料名称', trigger: 'change' }],
        qty: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        hi: [{ validator: HiFn, trigger: 'blur' }],
        lo: [{ validator: LoFn, trigger: 'blur' }]
      },
      loading: false,
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      keyword: "",
      materialList: [],
      stepLoading: false,
      title: "添加",
      phaseLoading: false,
      fid: ""
    }
  },
  created () {
    this.getItemList()
    this.phaseAutoFind()
    this.formData.flastModifyComment = this.phaseData.description
  },
  methods: {
    phaseAutoFind () {
      const param = {
        phaseId: this.parentFid,
      }
      formula.phaseAutoList(param).then(res => {
        if (res.code == 200) {
          this.list = res.data.rows
          if (res.data.rows.length > 0) {
            this.title = "编辑"
            this.formData.itemId = res.data.rows[0].paraName
            this.formData.qty = res.data.rows[0].target
            this.formData.uom = res.data.rows[0].uom
            this.fid = res.data.rows[0].fid
            this.formData.hi = res.data.rows[0].hi
            this.formData.lo = res.data.rows[0].lo
          }

        }
      })
    },
    getItemList () {
      const param = {
        className: this.keyword,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        itemClassVo: {
          consumed: 1
        }
      }
      configure.getItemList(param).then(res => {
        if (res.code == 200) {
          this.materialList = [...this.materialList, ...res.data.rows]
        }
      })
    },
    remoteMethodMaterial (keyword) {
      this.keyword = keyword.trim();
      this.pager.pageNum = 1
      setTimeout(() => {
        this.materialList = []
        this.getItemList()
      }, 200)
    },
    loadMoreMaterialFun () {
      this.pager.pageNum++
      this.getItemList()
    },
    clearMaterial () {
      this.keyword = ""
      this.pager.pageNum = 1
      this.materialList = []
      this.getItemList()
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          const param = [{
            paraName: this.formData.itemId,
            uom: this.formData.uom,
            target: this.formData.qty,
            phaseDesc: this.formData.phaseDesc,
            phaseId: this.parentFid,
            lo: this.formData.lo,
            hi: this.formData.hi
          }]
          if (this.title == "编辑") {
            param[0].fid = this.fid
          }
          formula.phaseAutoAdd(param, this.title).then(res => {
            if (res.code == 200) {
              this.saveDesc()
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      })
    },
    saveDesc () {
      let param = {
        fid: this.phaseData.fid,
        name: this.phaseData.name,
        type: this.phaseData.type,
        sn: this.phaseData.sn,
        description: this.formData.flastModifyComment,
      }
      configure.phaseDefineAdd(param, '编辑').then(res => {
        this.loading = false
        if (res.code == 200) {
          this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
          this.$emit('uptionList')
        }
      }).catch(e => {
        this.loading = false
      })
    },
    handleClose () {
      this.$refs["ruleForm"].resetFields();
      this.$emit('handleClose', 'PH_CHA')
    },
    changeCheck (val) {
      this.$forceUpdate()
    },
    changeItemId (val) {
      this.formData.uom = this.materialList.find(item => item.fid == val).uomId
    },
  },
}
</script>
<style scoped>
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-bottom: 10px;
}
.footerBtn {
  text-align: right;
}
</style>